<!-- 构造表单拖拽页面的容器 -->
<template>
  <el-container class="fm2-container">
    <div class="eo-vis-editor-header ">
      <ul class="eo-vis-menu-bar ng-isolate-scope">
        <!-- ngIf: eoVisMenuBar.isModelLoaded -->
        <li ng-if="eoVisMenuBar.isModelLoaded" class="eo-vis-menu-bar-element ng-scope">
          <div class="eo-vis-menu ng-isolate-scope">
            <div
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              e-tooltip-html="true"
              tabindex="0"
              title="保存"
              aria-disabled="false"
              @click="saveJson"
            >

              <i class="fa fa-floppy-o" style="font-size: 20px;" aria-hidden="true" />
            </div>

          </div>

          <div class="eo-vis-menu eo-vis-menu--single ng-scope ng-isolate-scope">
            <div
              e-tooltip-html="true"
              title="预览"
              style="font-size: 28px;"
              ng-disabled="eoVisFormPreview.isDisabled()"
              ng-click="eoVisFormPreview.getFormPreview()"
              ng-show="eoVisMenuBar.isFormEditor()"
              tabindex="0"
              aria-hidden="false"
              aria-disabled="false"
              class="eo-vis-menu-svgWrapper ng-isolate-scope"
              @click="handlePreview"
            >
              <i class="layui-icon layui-icon-read" style="font-size: 20px;" aria-hidden="true" />
            </div>
          </div>

          <div
            class="eo-vis-menu ng-scope ng-isolate-scope ng-hide"
            ng-show="eoVisDocker.isVisible()"
            ng-if="!eoVisMenuBar.isDMNEditor() &amp;&amp; eoVisMenuBar.activeModelHasCanvas()"
            aria-hidden="true"
          >

            <div
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Auto layout"
              tabindex="0"
              @click="handleLeft"
            >
              <i class="layui-icon layui-icon-align-left" aria-hidden="true" />
            </div>
            <div
              class="eo-vis-menu-svgWrapper"
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Delete a docker from an edge, by ctrl + click on it"
              ng-click="eoVisDocker.enableDeleteDocker()"
              tabindex="0"
              @click="handleTop"
            >
              <i class="layui-icon layui-icon-align-center" aria-hidden="true" />
            </div>

            <div
              class="eo-vis-menu-svgWrapper "
              style="font-size: 28px;"
              e-tooltip-html="true"
              title="Change the position of shapes"
              ng-click="eoVisShapeTranslate.translateShapes()"
              tabindex="0"
              @click="handleRight"
            >
              <i class="layui-icon layui-icon-align-right" aria-hidden="true" />
            </div>
          </div>
        </li><!-- end ngIf: eoVisMenuBar.isModelLoaded -->
      </ul>
    </div>
    <!--        <el-button v-if="upload" type="warning" size="mini" round icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>-->
    <!--        <el-button v-if="generateJson" type="success" size="mini" round icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>-->

    <el-main class="fm2-main">
      <el-container>
        <el-aside width="250px">

          <div class="components-list">
            <div class="widget-cate">基础字段</div>
            <draggable
              tag="ul"
              :list="basicComponents"
              v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
              :move="handleMove"
              @end="handleMoveEnd"
              @start="handleMoveStart"
            >

              <li v-for="(item, index) in basicComponents" :key="index" class="form-edit-widget-label" :class="{'no-put': item.type == 'divider'}">
                <a>

                  <i class="icon iconfont" :class="item.icon" />

                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>

            <div class="widget-cate">面板控件</div>
            <draggable
              tag="ul"
              :list="advanceComponents"
              v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
              :move="handleMove"
              @end="handleMoveEnd"
              @start="handleMoveStart"
            >

              <li v-for="(item, index) in advanceComponents" :key="index" class="form-edit-widget-label" :class="{'no-put': item.type == 'table'}">
                <a>
                  <i class="icon iconfont" :class="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>
            <div class="widget-cate">导航</div>
            <draggable
              tag="ul"
              :list="navigationComponents"
              v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
              :move="handleMove"
              @end="handleMoveEnd"
              @start="handleMoveStart"
            >

              <li v-for="(item, index) in navigationComponents" :key="index" class="form-edit-widget-label no-put">
                <a>
                  <i class="icon iconfont" :class="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>

            <div class="widget-cate">布局字段</div>
            <draggable
              tag="ul"
              :list="layoutComponents"
              v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
              :move="handleMove"
              @end="handleMoveEnd"
              @start="handleMoveStart"
            >

              <li v-for="(item, index) in layoutComponents" :key="index" class="form-edit-widget-label no-put">
                <a>
                  <i class="icon iconfont" :class="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </li>
            </draggable>
            <div class="widget-cate">不常用字段</div>
            <draggable
              tag="ul"
              :list="uncommonlyUsedComponents"
              v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
              :move="handleMove"
              @end="handleMoveEnd"
              @start="handleMoveStart"
            >

              <li v-for="(item, index) in uncommonlyUsedComponents" :key="index" class="form-edit-widget-label no-put">
                <a>
                  <i :class="item.icon" style="margin-left: 5px" />
                  <span class="uncommonlyUsedComponentsSpan">{{ item.name }}</span>
                </a>
              </li>
            </draggable>
          </div>

        </el-aside>
        <el-container class="center-container" direction="vertical">

          <!--  <el-header class="btn-bar" style="height: 45px;">
                          <slot name="action">
                          </slot>

                          <el-button v-if="generateCode" type="primary" round size="mini" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
                          <el-button v-if="generateJson" type="success" size="mini" round icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
                          <el-button v-if="preview" type="info" size="mini" round icon="el-icon-view" @click="handlePreview">预览</el-button>
                          <el-button v-if="clearable" type="danger" size="mini" round icon="el-icon-delete" @click="handleClear">清空</el-button>
                          <el-button v-if="upload" type="warning" size="mini" round icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
                      </el-header> -->

          <el-main :class="{'widget-empty': widgetForm.list.length == 0}">

            <!-- 中部表单放着区域 -->
            <!-- sync 在子组件当中修改父组件的某个数据-->
            <widget-form
              v-if="!resetJson"
              ref="widgetForm"
              :data="widgetForm"
              :select.sync="widgetFormSelect"
            />
          </el-main>
        </el-container>
        <!-- 右侧字段和表单属性放置区域 -->
        <el-aside class="widget-config-container">
          <el-container>
            <el-header height="45px">
              <div
                class="config-tab"
                :class="{active: configTab=='widget'}"
                @click="handleConfigSelect('widget')"
              >字段属性
              </div>
              <div
                class="config-tab"
                :class="{active: configTab=='form'}"
                @click="handleConfigSelect('form')"
              >表单属性
              </div>
            </el-header>
            <el-main class="config-content">
              <!-- configTab 确定显示字段属性还是表单属性  -->
              <widget-config
                v-show="configTab=='widget'"
                :data="widgetFormSelect"
                :struct-data="widgetForm"
                @getBlockData="getBlockData(arguments)"
              />
              <form-config
                v-show="configTab=='form'"
                ref="formConfig"
                :data="widgetForm.config"
                :form="widgetForm"
                @getjson="getData($event)"
              />
              <widget-config ref="widgetConfig" @getBlockData="getBlockData($event)" />
            </el-main>
          </el-container>

        </el-aside>
        <!-- 预览的组件 -->
        <cus-dialog
          ref="widgetPreview"
          :visible="previewVisible"
          :title="widgetForm.config.formName"
          width="1000px"
          form
          @on-close="previewVisibleClose"
        >
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>{{ widgetForm.config.formName }}</span>
            </div>
            <div class="text item">
              <generate-form
                v-if="previewVisible"
                ref="generateForm"
                insite="true"
                :data="widgetForm"
                :value="widgetModels"
                :remote="remoteFuncs"
              >

                <!-- 						<template v-slot:blank="scope">
                                                            宽度：
                                                            <el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
                                                            高度：
                                                            <el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
                                                        </template>

                                                        <template v-slot:abc="scope">
                                                            宽度：
                                                            <el-input v-model="scope.model.abc" style="width: 100px"></el-input>
                                                        </template> -->
              </generate-form>
            </div>
          </el-card>

          <template slot="action">

            <el-button type="primary" @click="handleTest">获取数据</el-button>
            <el-button @click="handleReset">重置</el-button>

          </template>

        </cus-dialog>

        <cus-dialog
          ref="uploadJson"
          :visible="uploadVisible"
          width="800px"
          form
          @on-close="uploadVisible = false"
          @on-submit="handleUploadJson"
        >
          <el-alert type="info" title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可" />
          <div id="uploadeditor" style="height: 400px;width: 100%;">{{ jsonEg }}</div>
        </cus-dialog>

        <cus-dialog ref="jsonPreview" :visible="jsonVisible" width="800px" form @on-close="jsonVisible = false">

          <div id="jsoneditor" style="height: 400px;width: 100%;">{{ jsonTemplate }}</div>

          <template slot="action">
            <el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制数据</el-button>
          </template>
        </cus-dialog>

        <cus-dialog
          ref="codePreview"
          :visible="codeVisible"
          width="800px"
          form
          :action="false"
          @on-close="codeVisible = false"
        >
          <div id="codeeditor" style="height: 500px; width: 100%;">{{ htmlTemplate }}</div>
        </cus-dialog>
      </el-container>
    </el-main>
    <el-footer height="30px" style="font-weight: 600;">Powered by
      <a target="_blank" href="">盘古BPM-表单组件</a>
    </el-footer>
  </el-container>

</template>

<script>
import Draggable from 'vuedraggable' // vue拖动插件,拖动元素放在transition-group中
import WidgetConfig from './WidgetConfig' // 右侧 字段属性组件
import FormConfig from './FormConfig' // 右侧 表单属性组件
import WidgetForm from './WidgetForm' // 生成中间区域表单的组件
import CusDialog from './CusDialog'
import GenerateForm from './GenerateForm'
import Clipboard from 'clipboard' // 复制输入框,文本域,div元素到粘贴板中
// 所有表单的基本配置
import { basicComponents, layoutComponents, advanceComponents, navigationComponents, uncommonlyUsedComponents } from './componentsConfig.js'
import { loadJs, loadCss } from '../util/index.js'
import request from '../util/request.js' // ajax请求
import generateCode from './generateCode.js' // css与js的引入
import API from './router/api.js'
import { verification } from './router/verification.js'
import { isRepeat } from './router/utils.js'

export default {
  name: 'FmMakingForm',
  components: {
    Draggable,
    WidgetConfig,
    FormConfig, // 表单属性组件
    WidgetForm,
    GenerateForm,
    cusDialog: CusDialog
  },
  props: { // 验证父组件传入数据的类型
    preview: {
      type: Boolean,
      default: false
    },
    generateCode: {
      type: Boolean,
      default: false
    },
    generateJson: {
      type: Boolean,
      default: false
    },
    upload: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },

  data() { //  设置表单属性的相关字段
    return {
      basicComponents,
      layoutComponents,
      advanceComponents,
      navigationComponents,
      uncommonlyUsedComponents,

      resetJson: false,
      widgetForm: {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small',
          customClass: '',
          formName: '表单名称', // 表单名称
          customStyle: '',
          customJs: '',
          jsExpand: '',
          disable: false,
          showAnnotation: false,
          formNumber: this.createOrderNo() // 表单序号
        }
      },
      configTab: 'widget', // 默认显示字段属性
      widgetFormSelect: null,

      previewVisible: false,
      jsonVisible: false,
      codeVisible: false,
      uploadVisible: false,
      remoteFuncs: {
        func_test(resolve) {
          setTimeout(() => {
            const options = [{
              id: '1',
              name: '1111'
            },
            {
              id: '2',
              name: '2222'
            },
            {
              id: '3',
              name: '3333'
            }
            ]

            resolve(options)
          }, 2000)
        },

        upload_callback(response, file, fileList) {
          // console.log('callback', response, file, fileList)
        }
      },
      widgetModels: {},
      blank: '',
      htmlTemplate: '',
      jsonTemplate: '',
      uploadEditor: null,
      jsonCopyValue: '',
      jsonClipboard: null,
      jsonEg: `{
  "list": [
    {
      "type": "grid",
      "name": "栅格布局",
      "icon": "icon-grid-",
      "columns": [
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "cccc",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656611793",
                "remoteOptions": []

              },
              "novalid": {},
              "key": "1572656611793",
              "model": "day",
              "rules": [
                {
                  "type": "string",
                  "message": "请假格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "开始时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656630994",
                "remoteOptions": []
              },
              "key": "1572656719473",
              "model": "start",
              "rules": [],
              "novalid": {}
            }
          ]
        },
        {
          "span": 12,
          "list": [
            {
              "type": "input",
              "name": "请假人",
              "icon": "icon-input",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "required": false,
                "dataType": "string",
                "pattern": "",
                "placeholder": "",
                "customClass": "",
                "disabled": false,
                "remoteFunc": "func_1572656647372",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656647372",
              "model": "user",
              "rules": [
                {
                  "type": "string",
                  "message": "请假人格式不正确"
                }
              ]
            },
            {
              "type": "date",
              "name": "结束时间",
              "icon": "icon-date",
              "options": {
                "defaultValue": "",
                "readonly": false,
                "disabled": false,
                "editable": true,
                "clearable": true,
                "placeholder": "",
                "startPlaceholder": "",
                "endPlaceholder": "",
                "type": "date",
                "format": "yyyy-MM-dd",
                "timestamp": false,
                "required": false,
                "width": "",
                "customClass": "",
                "remoteFunc": "func_1572656676710",
                "remoteOptions": []
              },
              "novalid": {},
              "key": "1572656736023",
              "model": "end",
              "rules": []
            }
          ]
        }
      ],
      "options": {
        "gutter": 0,
        "justify": "center",
        "align": "middle",
        "customClass": "",
        "remoteFunc": "func_1572656606443"
      },
      "key": "1572656606443",
      "model": "grid_1572656606443",
      "rules": []
    }
  ],
  "config": {
    "labelWidth": 100,
    "labelPosition": "right",
    "size": "small",
    "customClass": "",
	"formName":"盘古请假流程",
	"formNumber":12323222
  }
}`
    }
  },
  watch: {
    widgetForm: {
      deep: true,
      handler: function(val) {

        //	console.log(this.$refs.widgetForm)
      }
    }
  },
  mounted() {
    // 初始化表单数据渲染
    this.getFormData()
  },

  methods: {
    validatePass(rule, info, callback) {
      verification(rule, info, callback, null)
    },
    // 菜单栏的方法
    handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    getA() {

    },
    // handleGoGithub () {
    //   window.location.href = 分享牛'
    // },
    // 初始化获取表单数据
    getFormData() {
      if (this.$route) {
        const params = this.$route.query
        if (params) {
          var id = params.id
          if (id) {
            request.get(API.prefix + 'form/bus/render/start/get/' + id).then(res => {
              var data = res.data
              var code = res.code
              if (code === 0) {
                this.handleFixedJson(data)
              } else {
                // this.$message.error(res.msg);
              }
            })
          }
        }
      }
    },

    // 生成订单序列号
    createOrderNo() {
      var outTradeNo = '' // 订单号
      for (var i = 0; i < 6; i++) // 6位随机数，用以加在时间戳后面。
      {
        outTradeNo += Math.floor(Math.random() * 10)
      }
      return new Date().getTime() + outTradeNo // 时间戳，用来生成订单号。
    },
    handleConfigSelect(value) {
      // console.log(value);
      this.configTab = value
    },
    handleMoveEnd(evt) {
      // 结束的时候触发
      //	console.log('end', evt)
    },
    handleMoveStart({
      oldIndex
    }) {

      // 拖动表单时触发
      //	console.log('2222');
      // console.log('start', oldIndex, this.basicComponents)
    },
    handleMove() {
      return true
    },
    handlePreview() {
      const style = document.createElement('style')
      style.type = 'text/css'
      style.innerText = '.el-row--flex {\n' +
                    '                    display: block ;\n' +
                    '                }'

      document.getElementsByTagName('head')[0].appendChild(style)

      this.previewVisible = true
    },
    previewVisibleClose() {
      const style = document.createElement('style')
      style.type = 'text/css'
      style.innerText = '.el-row--flex {\n' +
                    '                    display: flex ;\n' +
                    '                }'

      document.getElementsByTagName('head')[0].appendChild(style)

      this.previewVisible = false
    },
    handleLeft() {
      var config = this.widgetForm.config
      config.labelPosition = 'left'
    },
    handleRight() {
      var config = this.widgetForm.config
      config.labelPosition = 'right'
    },
    handleTop() {
      var config = this.widgetForm.config
      config.labelPosition = 'top'
    },

    handleReset() {
      this.$refs.generateForm.reset()
    },
    getAnnotationAction: function(list, resultList) {
      list.forEach(item => {
        if (item.options) {
          resultList[item.model] = item.options.annotationContext
        } else {
          list = item
          this.getAnnotationAction(list, resultList)
        }

        if (item.tabColumns) {
          list = item.tabColumns
          this.getAnnotationAction(list, resultList)
        }
        if (item.tableColumns) {
          list = item.tableColumns
          this.getAnnotationAction(list, resultList)
        }
      })
    },

    handleTest() {
      this.$refs.generateForm.getData().then(data => {
        this.jsonVisible = true
        for (var key in data) {
          if (data[key] === undefined) {
            data[key] = ''
          }
        }
        var list = this.$refs.formConfig.form.list
        var resultList = {}
        this.getAnnotationAction(list, resultList)
        var dataObj = {}

        data['annotation'] = resultList
        this.jsonTemplate = data
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          const editor = ace.edit('jsoneditor')
          editor.session.setMode('ace/mode/json')

          if (!this.jsonClipboard) {
            this.jsonClipboard = new Clipboard('.json-btn')
            this.jsonClipboard.on('success', (e) => {
              this.$message.success('复制成功')
            })
          }
          this.jsonCopyValue = JSON.stringify(data)
        })
        this.$refs.widgetPreview.end()
      }).catch(e => {
        this.$refs.widgetPreview.end()
      })
    },

    handleGenerateJson() {
      this.jsonVisible = true
      this.jsonTemplate = this.widgetForm
      // console.log(JSON.stringify(this.widgetForm))
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        const editor = ace.edit('jsoneditor')
        editor.session.setMode('ace/mode/json')

        if (!this.jsonClipboard) {
          this.jsonClipboard = new Clipboard('.json-btn')
          this.jsonClipboard.on('success', (e) => {
            this.$message.success('复制成功')
          })
        }
        this.jsonCopyValue = JSON.stringify(this.widgetForm)
      })
    },

    saveJson() {
      this.jsonTemplate = this.widgetForm
      // console.log(JSON.stringify(this.widgetForm))
      const params = this.$route.query
      var id = params.id
      const param = new FormData()
      param.append('jsonStr', encodeURIComponent(JSON.stringify(this.widgetForm)))
      var allKeys = []
      this.widgetForm.list.find((item) => {
        allKeys.push(item.model)
      })
      var repeate = isRepeat(allKeys)
      if (typeof repeate === 'boolean') {
        request.post(API.prefix + '/form/design/saveJson/' + id, param, { headers: { 'content-type': 'application/x-www-form-urlencoded' }})
          .then((data) => {
            // console.log(data)
            if (data.code === 0) {
              this.$message({
                'duration': '800',
                message: '保存成功',
                type: 'success'
              })
            } else {
              this.$message.error(data.msg)
            }
          }).catch(err => {
            console.log(err)
          }
          )
      } else {
        var obj = this.widgetForm.list.find((item) => { // 这里的userList就是上面遍历的数据源
          return item.model === repeate// 筛选出匹配数据
        })
        this.$message({
          'duration': '800',
          message: '「' + obj.name + '」' + '重复定义多次，不能进行表单的保存操作',
          type: 'error'
        })
      }
    },

    publish() {
      this.jsonTemplate = this.widgetForm
      const params = this.$route.query
      var id = params.id
      request.get(API.prefix + '/form/design/models/publish/' + id).then(res => {
        var data = res.data
        var code = res.code
        if (code === 0) {
          this.$router.go(-1)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleGenerateCode() {
      this.codeVisible = true
      this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
      this.$nextTick(() => {
        const editor = ace.edit('codeeditor')
        editor.session.setMode('ace/mode/html')
      })
    },
    handleUpload() {
      this.uploadVisible = true
      // ace web编辑器
      this.$nextTick(() => {
        this.uploadEditor = ace.edit('uploadeditor')
        this.uploadEditor.session.setMode('ace/mode/json')
      })
    },
    handleUploadJson() {
      try {
        this.setJSON(JSON.parse(this.uploadEditor.getValue()))
        this.uploadVisible = false
      } catch (e) {
        this.$message.error(e.message)
        this.$refs.uploadJson.end()
      }
    },
    handleFixedJson(data) {
      try {
        this.setJSON(JSON.parse(data))
        this.uploadVisible = false
      } catch (e) {
        this.$message.error(e.message)
        this.$refs.uploadJson.end()
      }
    },
    handleClear() {
      this.widgetForm = {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: 'right',
          size: 'small',
          customClass: ''
        }
      }
      this.$refs.formConfig.getA()

      this.widgetFormSelect = {}
    },
    getData(val) {
      var config = this.widgetForm.config
      var list = this.widgetForm.list

      for (var i = 0; i < list.length; i++) {
        list[i].options.span = parseInt(val)
      }
    },
    getBlockData(obj) {
      var val = obj[0]
      var key = obj[1]
      var list = this.widgetForm.list

      for (var i = 0; i < list.length; i++) {
        if (list[i].key === key) {
          var tableColumns = list[i].tableColumns
          for (var j = 0; j < tableColumns.length; j++) {
            tableColumns[j].options.span = parseInt(val)
          }
          break
        }
      }
    },
    getHtml() {
      return generateCode(JSON.stringify(this.widgetForm))
    },
    setJSON(json) {
      this.widgetForm = json

      if (json.list.length > 0) {
        this.widgetFormSelect = json.list[0]
      }
    },
    handleInput(val) {
      //	console.log(val)
      this.blank = val
    }
  }
}
</script>

<style lang="scss">

    .widget-empty {
        background: url('../assets/form_empty.png') no-repeat;
        background-position: 50%;
    }

    .custom1 .el-col {
        border: 1px solid #ccc;
        overflow: hidden;
        padding: 5px;
        // margin-right:-1px;
        // margin-bottom:-1px;
        margin-right: -1px;
        margin-bottom: -1px;
    }

    .custom .el-col {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    div.eo-vis-menu-svgWrapper:hover{
        color: dodgerblue;
    }
    .eo-vis-menu-bar-element .eo-vis-menu {
        border-right:none !important;
    }

    .components-list .form-edit-widget-label {
        font-size: 12px;
        display: block;
        width: 48% !important;
        line-height: 26px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        color: #333;
        border: 1px solid #F4F6FC;
    }
    .uncommonlyUsedComponentsSpan{
        margin-left: 10px;
    }
</style>
